<template>
    <div class="box">
        <!-- 左半边的三级路由导航栏 -->
        <div class="left-navbar">
            <NavbarVue></NavbarVue>
        </div>

        <!-- 右半边的三级路由容器 -->
        <div class="right-content">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
import NavbarVue from './components/navbar.vue'
export default {
    components:{
        NavbarVue
    },
    setup() {


        return {}
    }
}
</script>

<style lang="less" scoped>
.box {
    width: 100vw;
    height: calc(100vh - 70px);
    display: flex;
    background: #F2F2F2;

    .left-navbar {
        width: 200px;
        height: 100%;
        background: #ffffff;
    }
    .right-content{
        margin-left: 20px;
        height: 100%;
        width: calc(100vw - 220px);
        overflow: hidden;
        overflow-y: scroll;
        // background: #ffffff;
    }
}
</style>